﻿@model OT.Models.Users
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container flex-main">
    <div class="row">
        <div class="col-md-12">
            <br />
<div id="divMsgIndex"></div>
<div class="admin-form">
    <div class="container">
        <div class="row">
            <div class="col-lg-7">
                <!-- Widget starts -->
                <div class="widget wred" style="width: 100%">
                    <div class="widget-head">
                        <h3>Registration For Instructor</h3>
                    </div>
                    <hr />
                    <div class="widget-content">
                        <div class="padd">
                            <form class="form-horizontal">
                                <div class="form-group" id="divFirstName">
                                    <label class="control-label col-lg-4" for="name">First Name</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="FirstName" placeholder="Enter First Name">
                                    </div>
                                </div>
                                <div class="form-group" id="divLastName">
                                    <label class="control-label col-lg-4" for="name">Last Name</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="LastName" placeholder="Enter First Name">
                                    </div>
                                </div>
                                <div class="form-group" id="divAddress">
                                    <label class="control-label col-lg-4" for="name">Address</label>
                                    <div class="col-lg-8">
                                        <textarea class="form-control" placeholder="Enter Address" rows="3" id="Address"></textarea>
                                    </div>
                                </div>
                                <!-- Email -->
                                <div class="form-group" id="divEmail">
                                    <label class="control-label col-lg-4" for="email">Email</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="EmailAddress" placeholder="Enter Email Address">
                                    </div>
                                </div>
                                <div class="form-group" id="divPassword">
                                    <label class="control-label col-lg-4" for="pass">Password</label>
                                    <div class="col-lg-8">
                                        <input type="password" class="form-control" id="Password" placeholder="Enter Password">
                                    </div>
                                </div>
                                <div class="form-group" id="divConfirmPassword">
                                    <label class="control-label col-lg-4" for="pass">Confirm Password</label>
                                    <div class="col-lg-8">
                                        <input type="password" class="form-control" id="ConfirmPassword" placeholder="Enter Confirm password">
                                    </div>
                                </div>
                                <div class="form-group" id="divMobile">
                                    <label class="control-label col-lg-4" for="email">Mobile Number</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="MobileNo" placeholder="Enter Mobile Number" maxlength="12">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-lg-4" for="email">Landline Number</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="LandlineNo" placeholder="Enter Landline Number" maxlength="12">
                                    </div>
                                </div>
                                <!-- Select box -->
                                <div class="form-group" id="divCountry">
                                    <label class="control-label col-lg-4">Country</label>
                                    <div class="col-lg-8">
                                        @Html.DropDownListFor(model => model.CountryID, new SelectList(Model.Countrys, "CountryID", "CountryName"), "----Select Country---", new { @class = "form-control" })
                                        <span id="country" style="color: red"></span>
                                        @Html.ValidationMessageFor(model => model.CountryID)
                                    </div>
                                </div>
                                <div class="form-group" id="divState">
                                    <label class="control-label col-lg-4">State</label>
                                    <div class="col-lg-8">
                                        <select id="StateID" class="form-control">
                                            <option>--Select--</option>
                                        </select>
                                        <span id="state" style="color: red"></span>
                                    </div>
                                </div>
                                <div class="form-group" id="divCity">
                                    <label class="control-label col-lg-4">City</label>
                                    <div class="col-lg-8">
                                        <select id="CityID" class="form-control">
                                            <option>--Select---</option>
                                        </select>
                                        <span id="city" style="color: red"></span>
                                    </div>
                                </div>
                                <div class="form-group" id="divCaptcha">
                                    <label class="control-label col-lg-4" for="username">Captcha</label>
                                    <div class="col-lg-8">
                                        @Html.Partial("Captcha")
                                        <br />
                                        <input type="text" id="Captchainput" maxlength="5" class="form-control" placeholder="Enter Captcha Value" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-lg-9 col-lg-offset-3">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" id="ChkBoxAccept">
                                                Accept Terms &amp; Conditions
                                            </label>
                                        </div>
                                        <br />
                                        <button class="btn btn-sm btn-info" id="btnCreate" data-loading-text="Loading...">Register</button>
                                        <button type="reset" class="btn btn-sm btn-default">Reset</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="widget-foot">
                        Already Registred? <a href="~/Home/Index">Login</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="msg" style="color: red; font-size: 18px"></div>
<div id="msg1" style="color: gray; font-size: 10px"></div>
            </div>
        </div>
    </div>
@section scripts{
    <script type="text/javascript">
        function reset() {
            $("#FirstName").val("");
            $("#LastName").val("");
            $("#Address").val("");
            $("#EmailAddress").val("");
            $("#Password").val("");
            $("#ConfirmPassword").val("");
            $("#MobileNo").val("");
            $("#LandlineNo").val("");
            $("#CountryID").val(0);
            $("#StateID").val(0);
            $("#CityID").val(0);
            $("#Captchainput").val("");

        }
        $(document).on("click", "#btnCreate", null, function (e) {
            var btn = $(this)
            var FirstName = $("#FirstName").val();
            var LastName = $("#LastName").val();
            var Address = $("#Address").val();
            var EmailAddress = btoa($("#EmailAddress").val());
            var Password = btoa($("#Password").val());
            var confirmpassword = $("#ConfirmPassword").val();
            var MobileNo = $("#MobileNo").val();
            var LandlineNo = $("#LandlineNo").val();
            var CountryID = $("#CountryID").val();
            var StateID = $("#StateID").val();
            var CityID = $("#CityID").val();
            var cap = $("#Captchainput").val();
            if ($("#ChkBoxAccept").is(':checked')) {
                accept = true;
            }
            else {
                accept = false;
            }
            e.preventDefault();
            $(".error").hide();

            if (FirstName == '' || LastName == '' || EmailAddress == '' || Password == '' || confirmpassword == '' || MobileNo == '' || CountryID == 0 || StateID == 0 || CityID == 0 || cap == '' || accept==false) {
                showMsg('divMsgIndex', 'Please Enter All Required Field Value', 'danger');
                (FirstName == '') ? $('#divFirstName').addClass('has-error') : $('#divFirstName').removeClass('has-error');
                (LastName == '') ? $('#divLastName').addClass('has-error') : $('#divLastName').removeClass('has-error');
                (EmailAddress == '') ? $('#divEmail').addClass('has-error') : $('#divEmail').removeClass('has-error');
                (Password == '') ? $('#divPassword').addClass('has-error') : $('#divPassword').removeClass('has-error');
                (confirmpassword == '') ? $('#divConfirmPassword').addClass('has-error') : $('#divConfirmPassword').removeClass('has-error');
                (MobileNo == '') ? $('#divMobile').addClass('has-error') : $('#divMobile').removeClass('has-error');
                (CountryID == 0) ? $('#divCountry').addClass('has-error') : $('#divCountry').removeClass('has-error');
                (StateID == 0) ? $('#divState').addClass('has-error') : $('#divState').removeClass('has-error');
                (CityID == 0) ? $('#divCity').addClass('has-error') : $('#divCity').removeClass('has-error');
                (cap == '') ? $('#divCaptcha').addClass('has-error') : $('#divCaptcha').removeClass('has-error');
                if (accept) {
                }
                else {
                    showMsg('divMsgIndex', 'Please Accept Terms And Condition', 'danger');
                }
            }
            else {
                $.getJSON("/Home/CapValid", { cap: cap },
                   function (res) {
                       if (res == "valid") {

                           showMsg('divMsgIndex', '', '');
                           btn.button('loading');

                           var rl = "/Home/CreateInstructor?FirstName=" + FirstName + "&LastName=" + LastName + "&Address=" + Address + "&EmailAddress=" + EmailAddress + "&Password=" + Password + "&MobileNo=" + MobileNo + "&LandlineNo=" + LandlineNo + "&CountryID=" + CountryID + "&StateID=" + StateID + "&CityID=" + CityID + "&Captcha=" + cap
                           $.ajax({
                               url: rl,
                               type: "POST",
                               success: function (result) {
                                   if (result != "NotValid") {
                                       reset();
                                       window.location.href = '@Url.Content("~/Instructor?Register=sc")';
                                   }
                                   else {
                                       $("#msg").attr("color", "Red");
                                       $("#msg").val("Registered User unSuccessfully !!!!");
                                   }
                               },
                               error: function (result) {
                                   alert(result);
                               }
                           }).always(function () {
                               btn.button('reset')
                           });
                       }
                       return false;
                   });
            }
        });
        $('#FirstName').focusout(function () {
            $(".error").hide();
            var nameRegex = /^[A-Za-z]+$/;
            var fname = $("#FirstName").val();
            if (!(nameRegex.test(fname))) {
                showMsg('divMsgIndex', 'Please Enter Valid Name', 'danger');
                $('#divFirstName').addClass('has-error');
            } else if (fname == "") {
                showMsg('divMsgIndex', 'Please Enter Valid Name', 'danger');
                $('#divFirstName').addClass('has-error');
            }
            else {
                $('#divFirstName').removeClass('has-error');

                return false;
            }
        });

        $('#LastName').focusout(function () {
            $(".error1").hide();
            var nameRegex = /^[A-Za-z]+$/;
            var fname = $("#LastName").val();

            if (!(nameRegex.test(fname))) {
                showMsg('divMsgIndex', 'Please Enter Valid Last Name', 'danger');
                $('#divLastName').addClass('has-error');
            } else if (fname == " ") {
                showMsg('divMsgIndex', 'Please Enter Last Name', 'danger');
                $('#divLastName').addClass('has-error');
            } else {
                $('#divLastName').removeClass('has-error');

                return false;
            }
        });

        $('#Password').focusout(function () {
            $(".error2").hide();
            var fname = $("#Password").val();
            if (fname == " ") {
                showMsg('divMsgIndex', 'Please Enter Password', 'danger');
                $('#divPassword').addClass('has-error');
            } else if (fname.length < 6) {
                showMsg('divMsgIndex', 'PassWord Must be 6 character long.', 'danger');
                $('#divPassword').addClass('has-error');
            }
            else if (!fname.match(/([!,%,&,#,$,^,*,?,_,~,@@])/)) {
                showMsg('divMsgIndex', 'Password Must be contain one Special Character.', 'danger');
                $('#divPassword').addClass('has-error');
            }
            else if (!fname.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
                showMsg('divMsgIndex', 'Password should be contain Character in Upper & Lower Case.', 'danger');
                $('#divPassword').addClass('has-error');
            }
            else {
                $('#divPassword').removeClass('has-error');
                return false;
            }
        });

        $('#ConfirmPassword').focusout(function () {
            $(".error13").hide();
            var pass = $("#Password").val();
            var cpass = $('#ConfirmPassword').val();
            if (pass == "") {
                showMsg('divMsgIndex', 'Please enter Confirm Password', 'danger');
                $('#divConfirmPassword').addClass('has-error');
            } else if (cpass != pass) {
                showMsg('divMsgIndex', 'PassWord Not Matched.', 'danger');
                $('#divConfirmPassword').addClass('has-error');
            }
            else {
                $('#divConfirmPassword').removeClass('has-error');
                return false;
            }
        });

        $('#MobileNo').focusout(function () {
            var fname = $("#MobileNo").val();
            if (fname.length < 10) {
                showMsg('divMsgIndex', 'Please enter valid Mobile Number[10 Digit]', 'danger');
                $('#divMobile').addClass('has-error');
            } else if (fname == " ") {
                showMsg('divMsgIndex', 'Please enter Mobile Number', 'danger');
                $('#divMobile').addClass('has-error');
            } else {
                $('#divMobile').removeClass('has-error');
                return false;
            }
        });

        $(document).on("keypress", "#MobileNo", null, function (e) {
            $('#alert_danger4').children('.alert:first-child').remove()
            if ((e.which < 48 || e.which > 57)) {
                if (e.which == 8 || e.which == 46 || e.which == 0) {
                    $('#divMobile').removeClass('has-error');
                    return true;
                }
                else {
                    showMsg('divMsgIndex', 'Please enter Mobile Number', 'danger');
                    $('#divMobile').addClass('has-error');
                    return false;
                }
            }
        });

        $('#Captchainput').focusout(function () {
            $(".error5").hide();
            var cap = $("#Captchainput").val();
            if (cap == "") {
                showMsg('divMsgIndex', 'Please Enter Captcha.', 'danger');
                $('#divCaptcha').addClass('has-error');
            } else {
                $.getJSON("/Home/CapValid", { cap: cap },
                    function (res) {
                        if (res == "valid") {
                            $('#divCaptcha').addClass('has-success');
                        }
                        else {
                            showMsg('divMsgIndex', 'Entered Captcha Is Not Valid.', 'danger');
                            $('#divCaptcha').addClass('has-error');
                            // bootstrap_alert.danger5('Please Enter Valid Captcha.');
                        }
                    });
                return false;
            }
        });

        $('#EmailAddress').focusout(function () {
            var nameRegex = new RegExp(/^([\w-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/);
            var fname = $("#EmailAddress").val();
            if (!(nameRegex.test(fname))) {
                showMsg('divMsgIndex', 'Please enter valid Email Address.', 'danger');
                $('#divEmail').addClass('has-error');
            } else if (fname == " ") {
                showMsg('divMsgIndex', 'Please enter Email ID.', 'danger');
                $('#divEmail').addClass('has-error');
            } else {
                showMsg('divMsgIndex', '', '');
                $("#divEmail").removeClass('has-error');
                $("#divEmail").removeClass('has-warning');
                $("#divEmail").removeClass('has-success');
                var EmailID1 = $("#EmailAddress").val();
                $.getJSON("/Home/Avail", { EmailID1: EmailID1 },
                     function (classesData) {                         
                         if (classesData == 0) {
                             $("#divEmail").removeClass('has-error');
                             $("#divEmail").removeClass('has-warning');
                         }
                         else if (classesData == 1) {
                             showMsg('divMsgIndex', 'EmailID Already Exist , Try Other!.', 'danger');
                             $("#divEmail").removeClass('has-error').addClass('has-warning');
                         }
                         else {
                             showMsg('divMsgIndex', '', '');
                             $("#divEmail").removeClass('has-error');
                             $("#divEmail").removeClass('has-warning');
                             $("#divEmail").removeClass('has-success');
                         }
                     });
                return false;
            }
        });

        $('#CountryID').focusout(function () {
            $('#alert_danger7').children('.alert:first-child').remove()
            var cnt = $("#CountryID").val();
            if (cnt == 0) {
            }
            else {

            }
        });

        $('#StateID').focusout(function () {
            $('#alert_danger8').children('.alert:first-child').remove()
            var cnt = $("#StateID").val();
            if (cnt == 0) {

            }
            else {

            }
        });
        $('#CityID').focusout(function () {
            $('#alert_danger9').children('.alert:first-child').remove()
            var cnt = $("#CityID").val();
            if (cnt == 0) {

            }
            else {

            }
        });
        $(document).on("change", "#CountryID", null, function (e) {
            var CountryID = $(this).val();
            var sub = $("#StateID").empty();
            sub.append($('<option/>', {
                value: 0,
                text: "----Select State----"
            }))
            var ct = $("#CityID").empty();
            ct.append($('<option/>', {
                value: 0,
                text: "----Select City----"
            }))
            $.getJSON("/Home/LoadState", { CountryID: CountryID },
                   function (classesData) {
                       var select = $("#StateID");
                       select.empty();
                       select.append($('<option/>', {
                           value: 0,
                           text: "----Select State----"
                       }));
                       $.each(classesData, function (index, itemData) {
                           select.append($('<option/>', {
                               value: itemData.Value,
                               text: itemData.Text
                           }));
                       });
                   });
            return false;
        });

        $(document).on("change", "#StateID", null, function (e) {
            var StateID = $(this).val();
            var sub = $("#CityID").empty();
            $.getJSON("/Home/LoadCity", { StateID: StateID },
                   function (classesData) {
                       var select = $("#CityID");
                       select.empty();
                       select.append($('<option/>', {
                           value: 0,
                           text: "----Select City----"
                       }));
                       $.each(classesData, function (index, itemData) {
                           select.append($('<option/>', {
                               value: itemData.Value,
                               text: itemData.Text
                           }));
                       });
                   });
            return false;
        });
        $("#btnlogin").click(function (e) {
            var EmailID = btoa($("#EmailAddress").val());
            var Password = btoa($("#Password").val());
            var UserTypeID = $('input[name="UserTypeID"]:checked').val();
            e.preventDefault();
            if (EmailID == '' || Password == '') {
                showMsg('divMsgIndex', 'Must Be Enter EmailID and PassWord', 'danger');
            }
            else {
                $.ajax({
                    url: "/Login/login?EmailID=" + EmailID + "&Password=" + Password + "&UserTypeID=" + UserTypeID,
                    type: "POST",
                    success: function (result) {
                        if (result != "") {
                            if (result == "Instructor") {
                                window.location = "Instructor";
                            } else if (result == "Student") {
                                window.location = "Student";
                            }
                            else {
                                showMsg('divMsgIndex', result, 'danger');
                            }
                        }
                        else {
                            showMsg('divMsgIndex', result, 'danger');
                        }
                    },
                    error: function (data) {
                    }
                });
            }

        });

    </script>
    }